<template>
	<view class="custom-select-panel">
		<scroll-view :scroll-y="true" @scrolltolower="bottomOut" style="height: 100%;">
			<view class="select-wrap">
				<u-checkbox-group v-if="multiple" :style="{height: height}" :wrap="true" width="100%"
					:active-color="activeColor">
					<view class="cell-item u-cell u-border-bottom" v-for="item in finalDataList"
						:key="item[finalProps.value]">
						<view class="u-cell_title" style="min-width:100%;">
							<u-checkbox :value="isChecked(item)" :name="item[finalProps.value]"
								:disabled="calcItemDisabled(item)" @input="(val) => onValueChange(item, val)">
								{{ item[finalProps.text] }}
							</u-checkbox>
						</view>
					</view>
				</u-checkbox-group>
				<u-radio-group v-else :style="{height: height}" :wrap="true" width="100%" :active-color="activeColor"
					v-model='currentValue'>
					<view class="cell-item u-cell u-border-bottom" v-for="item in finalDataList"
						:key="item[finalProps.value]">
						<view class="u-cell_title" style="min-width:100%;">
							<u-radio :name="item[finalProps.value]" :disabled="calcItemDisabled(item)"
								@change="(val) => onValueChange(item, val)">
								{{ item[finalProps.text] }}
							</u-radio>
						</view>
					</view>
				</u-radio-group>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import style from 'uni.scss';
	import {
		findItemFromList
	} from '@/utils';
	const DEFAULT_PROPS = {
		text: 'text',
		value: 'id',
		disabled: undefined,
		pageSize: 20
	};
	export default {
		props: {
			// 绑定数据
			value: {
				type: [Number, String, Array]
			},
			// 是否禁用
			disabled: {
				type: Boolean,
				default: false
			},
			// 是否多选
			multiple: {
				type: Boolean,
				default: false
			},
			// 组件高度
			height: {
				type: String
			},
			// 列表数据
			dataList: {
				type: [Array, Function],
				default: () => []
			},
			activeColor: {
				type: String,
				default: style.primary_color
			},
			props: {
				type: Object,
				default: () => {
					return {
						...DEFAULT_PROPS
					}
				}
			},
			// 过滤函数，仅当dataList为数组的时候生效，如果dataList是函数，请在函数中添加过滤条件
			filter: {
				type: Function
			}
		},
		data() {
			return {
				finalDataList: [],
				status: 'loadmore',
				pageNum: 1,
				pageSize: 20,
				currentValue: undefined
			}
		},
		created() {
			this.loadList()
		},
		methods: {
			isChecked(item) {
				if (item == null) return false;
				if (Array.isArray(this.value)) {
					return this.value.indexOf(item[this.finalProps.value]) !== -1;
				} else {
					return this.value === item[this.finalProps.value];
				}
			},
			onValueChange(item, val) {
				console.log(item)
				
				let temp = this.value;
				if (this.multiple) temp = Array.isArray(this.value) ? this.value : [];
				let id = item[this.finalProps.value];

				if (val) {
					// 选中
					if (this.multiple) {
						temp.push(id);
					} else {
						temp = id;
					}
				} else {
					// 取消选中
					if (this.multiple) {
						temp = temp.filter(item => {
							return item !== id;
						});
					} else {
						temp = undefined;
					}
				}
				this.currentValue = temp
				this.$emit('input', temp);
				
				this.$emit('changeCheck', temp,item);
			},
			onSelectChange(val) {
				this.$parent.changeSelect(val);
			},
			bottomOut() {
				if (typeof this.dataList === 'function') {
					if (this.status === 'nomore') return;
					this.status = 'loading';
					this.pageNum = ++this.pageNum;
					this.loadList()
				}
			},
			loadList() {
				if (typeof this.dataList === 'function') {
					this.dataList(this.pageNum).then(res => {
						if (this.pageNum === 1) {
							this.finalDataList = res.dataList.map(item => {
								return {
									...item,
									checked: false
								}
							})
						} else {
							this.finalDataList = this.finalDataList.concat(res.dataList.map(item => {
								return {
									...item,
									checked: false
								}
							}))
						}
						if (res.dataList.length === 0 || res.totalCount <= 0) {
							this.status = 'nomore'
						} else {
							this.status = 'loadmore'
						}
					})
				}
			},
			// 获取全部数据
			getDataList() {
				if (Array.isArray(this.dataList)) return this.dataList;
				return [];
			},
			// 获取选中数据，仅当dataList为数组时候生效
			getSelectDataList() {
				if (!Array.isArray(this.dataList)) {
					console.error('getSelectDataList 仅在dataList为数组时生效！');
					return [];
				}
				return findItemFromList(this.dataList, this.value, this.finalProps.value);
			},
			// 获取过滤后的数据列表
			getFinalDataList() {
				if (typeof this.filter !== 'function') return this.dataList;
				return this.dataList.filter(item => {
					return this.filter(item);
				});
			},
			// 选项是否禁用
			calcItemDisabled(data) {
				if (this.disabled) return true;
				if (data == null) return false;
				if (typeof this.finalProps.disabled === 'function') {
					return this.finalProps.disabled(data);
				} else {
					return this.finalProps.disabled == null ? false : data[this.finalProps.disabled];
				}
			},
			reset() {
				this.finalDataList = this.getFinalDataList();
				if (typeof this.filter !== 'function') {
					this.pageNum = 1;
					this.loadList();
				}
			}
		},
		computed: {
			finalProps() {
				return {
					...DEFAULT_PROPS,
					...this.props
				}
			},
			bindValue() {
				if (!this.value) return '';
				if (this.multiple && !Array.isArray(this.value)) {
					return [this.value];
				}
				if (!this.multiple && Array.isArray(this.value)) {
					return this.value[0];
				}
				// 修复复选框不会自动选中问题，根据group的value值修改子list的checked值
				if (this.multiple && Array.isArray(this.value) && this.value.length) {
					if (Array.isArray(this.finalDataList)) {
						this.finalDataList.forEach((item) => {
							if (this.value.indexOf(item.id) > -1) {
								item.checked = true;
							} else {
								item.checked = false;
							}
						});
					}
				}
				if (this.multiple && Array.isArray(this.value) && this.value.length === 0) {
					if (Array.isArray(this.finalDataList)) {
						this.finalDataList.forEach((item) => {
							item.checked = false;
						});
					}
				}
				return this.value;
			}
		},
		watch: {
			dataList: {
				handler() {
					this.reset();
				},
				immediate: true
			},
			value: {
				handler(val) {
					this.currentValue = val;
				},
				immediate: true
			}
		}
	}
</script>

<style lang="less" scoped>
	.custom-select-panel {
		height: 100%;

		::v-deep .u-checkbox-group {
			display: flex;
			flex-direction: column;

			.u-checkbox {
				border-bottom: 0;
			}
		}
	}


	.select-wrap {

		// padding: 0 30rpx;
		.cell-item {
			display: flex;
			flex-direction: row;
			align-items: center;
			position: relative;
			box-sizing: border-box;
			width: 100%;
			padding: 20rpx 32rpx;
			font-size: 28rpx;
			line-height: 54rpx;
			color: #606266;
			background-color: #fff;
			text-align: left;

			.u-cell_title {
				font-size: 28rpx;
			}
		}
	}
</style>